<template>
  <!-- 在template模版中编写html的网页结构 -->
  <div class="home">
    <h1>首页</h1>
  <p>段落</p>
  <h2>{{ msg }}</h2>
  <ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
    <li>无序列表5</li>
  </ul>
  <h1>{{ message }}</h1>
  <button @click="test">点击</button>
<button @click="test2">获取数据</button>
  </div>
</template>

<script lang="ts">
//编写当前逻辑业务的

import {ref} from "vue"
// 默认暴露出当前组件的业务对象

  export default{
    // //选项式API的写法  -  vue2语法
    // data(){
    //   return{
    //     msg:"选项式API的写法",
    //     message:"提示信息"
    //   }
    // },
    // methods:{//定义函数方法
    //   test(){
    //     alert("Hello Vue2")
    //   },
    //   test2(){
    //     console.log(this.msg);
    //   }
    // }
     //vue3的组合式API写法
    setup(){
      const msg = ref("Hello World")
      const message = ref("组合式API写法")

      console.log("home-首页")

      function test(){
        alert("Hello Vue3")
      }

      function test2(){
        console.log(msg.value);
      }

      return {
        msg,
        message,
        test,
        test2
      }
    }
   //对比区别
   //选项式API，使用默认的多个属性来定义描述业务逻辑，比如data、methods，
  //  所定义的属性都会暴露在函数内部this上，访问函数方法和data数据需要通过this去调用，
  //this它会指向当前组件实例

  // 组合式API：使用导入的API函数进行实现业务，主要通过setup方法进行做业务处理，
  //访问函数和数据直接通过函数名或数据名即可调用
  }
  

</script>

<style lang="less" scoped>
//scoped:样式的私有属性，设置了之后当前组件中的样式只在当前组件起作用,不会影响其他组件
/**
   编写css样式的地方
   css的语法是层级递进进行编写的
**/


/**
.home h1{
  color: red;
}
.home p{
  font-size: 20px;
}
.home ul li:nth-child(2n+1){
  background-color: red;
}
.home ul li:nth-child(2n){
  background-color: greenyellow;
}
**/

/**
scss、less是css的预处理器，编写样式使用嵌套结构进行编写
使用需要安装：npm install less less-loader
**/
.home{
  h1{
    color: red;
  }
  p{
    font-size: 20px;
    color: blue;
  }
  h2{
    color: pink;
  }
  ul{
   // &:继承上级选择器的属性
   li{
    background-color: red;

    &:nth-child(2n){
      background-color: skyblue;
    }
   }
    /**
    li:nth-child(2n+1){
      background-color: red;
    }
    li:nth-child(2n){
      background-color: greenyellow;
    }
  }
  **/
 }
}
</style>